<template>
	<view class="content">
		<view class="order-status">
			<text class="text">{{ orderInfo.status | statusFilter }}</text>
		</view>
		
		<view class="inner">
			<!-- 物流和收货信息 -->
			<view class="logis-addr">
				<view class="item" v-if="orderInfo.expressNo" @tap="logisDetail(orderInfo.expressNo)">
					<view class="left">
						<u-icon name="car-fill" size="40" color="#367FFF"></u-icon>
						<view class="center">
							<view class="text">
								<text class="title">物流公司：</text>
								{{ orderInfo.expressName || '' }}
							</view>
							<view class="text">
								<text class="title">快递单号：</text>
								{{ orderInfo.expressNo || '' }}
								<view class="copy-btn" @tap="onCopy(orderInfo.expressNo)"><view class="copy-inner"></view></view>
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
				<view class="item">
					<view class="left">
						<u-icon name="map-fill" size="40" color="#FFD426"></u-icon>
						<view class="center">
							<view class="text">
								<text class="addr-info">{{ orderInfo.addrName || '' }} {{ orderInfo.addrPhone || '' }}</text>
							</view>
							<view class="text">{{ orderInfo.areaName + orderInfo.address }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="order-info">
				<view class="title">商品信息</view>
				<view class="header" v-for="goodsItem in orderInfo.orderGoods">
					<view class="img-box">
						<image class="image" :src="goodsItem.goodsInfo.pic"></image>
					</view>
					<view class="goods-content">
						<view class="top">
							<view class="goods-name">{{ goodsItem.goodsInfo.title }}</view>
							<view class="sku">规格：默认</view>
						</view>
						<view class="price-amount">
							<view class="price">¥<text class="text">{{ goodsItem.amount }}</text></view>
							<view class="amount">x{{ goodsItem.count }}</view>
						</view>
					</view>
				</view>
				<view class="center">
					<view class="item"><text>商品总价：</text><text>¥{{ orderInfo.totalPrice }}</text></view>
					<view class="item"><text>运费：</text><text>免运费</text></view>
				</view>
				<view class="bottom">实付金额：<text class="symbol">¥<text class="text">{{ orderInfo.payPrice }}</text></text></view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="center">
					<view class="order-item">
						<view class="text">
							订单编号：{{ orderInfo.tradeNo }}
						</view>
						<view class="copy-btn" @tap="onCopy(orderInfo.tradeNo)"><view class="copy-inner"></view></view>
					</view>
					<view class="order-item"><view class="text">订单时间：{{ orderInfo.createTime }}</view></view>
					<view class="order-item"><view class="text">支付方式：余额支付</view></view>
					<view class="order-item" v-if="orderInfo.payTime"><view class="text">付款时间：{{ orderInfo.payTime }}</view></view>
					<view class="order-item" v-if="orderInfo.deliveryTime"><view class="text">发货时间：{{ orderInfo.deliveryTime }}</view></view>
					<view class="order-item" v-if="orderInfo.confirmTime"><view class="text">收货时间：{{ orderInfo.confirmTime }}</view></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'detail',
		data() {
			return {
				options: {},
				orderInfo: {}
			}
		},
		onLoad(options) {
			this.options = options;
			this.initPage();
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_dingdanxq');
			// #endif
		},
		methods: {
			initPage(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$service.order.order.info({
					id: this.options.orderId
				}).then(res => {
					this.orderInfo = res;
				
					uni.hideLoading()
				});
			},
			// 复制
			onCopy(str) {
				uni.setClipboardData({
				    data: str,
				    success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
				    }
				});
			},
			// 查看物流详情
			logisDetail(no) {
				uni.navigateTo({
					url: '/pages/order/logis?no=' + no
				})
			},
		},
		filters: {
			statusFilter(val) {
				switch (val) {
					case 0:
						return '已关闭';
					case 1:
						return '待发货';
					case 2:
						return '待收货';
					case 3:
						return '已完成';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 0;
		min-height: 100vh;
		background: linear-gradient(to bottom, $main-color 18%, #F6F7FA 18%, #F6F7FA 100%);
		.order-status {
			padding: 0 60rpx;
			height: 138rpx;
			padding-top: 36rpx;
			@include flexBox(flex-start, flex-start, column);
			.text {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
			}
			.desc {
				color: #333333;
				font-size: 26rpx;
				font-weight: 600;
				margin-top: 6rpx;
				.red {
					color: $main-color-text;
				}
			}
		}
		.inner {
			padding: 0 26rpx;
			.logis-addr {
				border-radius: 16rpx;
				background: #fff;
				.item {
					padding: 32rpx;
					border-bottom: 2rpx solid #EBEBEB;
					@include flexBox(space-between);
					&:last-child {
						border-bottom: none;
					}
					.left {
						@include flexBox(flex-start, center);
						.center {
							margin-left: 20rpx;
							.text {
								color: #2B2C2E;
								font-size: 26rpx;
								line-height: 40rpx;
								@include flexBox(flex-start, center);
								.title {
									color: #78797A;
								}
								.addr-info {
									font-size: 28rpx;
									font-weight: 600;
								}
								.copy-btn {
									margin-left: 20rpx;
								}
							}
						}
					}
				}
			}
			.order-info {
				padding: 0 20rpx;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 16rpx;
				.title {
					padding: 20rpx 0;
					color: #2B2C2E;
					font-size: 28rpx;
					font-weight: 600;
					border-bottom: 2rpx solid #EDEDED;
				}
				.header {
					width: 100%;
					padding: 20rpx 0;
					box-sizing: border-box;
					background: #fff;
					overflow: hidden;
					border-bottom: 2rpx solid #EDEDED;
					@include flexBox(center, flex-start);
					.img-box {
						width: 224rpx;
						height: 224rpx;
						position: relative;
						margin-right: 20rpx;
						border-radius: 16rpx;
						overflow: hidden;
						.image {
							position: absolute;
							width: 100%;
							height: 100%;
						}
						.group-number {
							position: absolute;
							background: $main-color;
							bottom: 0;
							left: 0;
							padding: 4rpx 12rpx;
							border-radius: 0 16rpx 0 16rpx;
							color: #333333;
							font-size: 26rpx;
						}
						.new-person {
							position: absolute;
							background: $main-color-text;
							bottom: 0;
							left: 0;
							padding: 4rpx 12rpx;
							border-radius: 0 16rpx 0 16rpx;
							color: #fff;
							font-size: 26rpx;
						}
					}
					.goods-content {
						flex: 1;
						overflow: auto;
						height: 224rpx;
						@include flexBox(space-between, flex-start, column);
						.top {
							.goods-name {
								font-size: 28rpx;
								color: #333333;
								margin-bottom: 10rpx;
								@include ellipsis(2);
							}
							.sku {
								font-size: 24rpx;
								color:#979899;
							}
						}
						.price-amount {
							color: #9A9A9A;
							@include flexBox(flex-start, flex-end);
							.price {
								font-size: 28rpx;
								color: #2B2C2E;
								font-weight: 600;
								.text {
									font-size: 36rpx;
									margin-right: 16rpx;
								}
							}
							.amount {
								color: #949596;
								font-size: 28rpx;
							}
						}
					}
				}
				.center {
					padding: 20rpx 0;
					.item, .order-item {
						font-size: 28rpx;
						color: #2B2C2E;
						margin-bottom: 14rpx;
						@include flexBox(space-between, center);
						&:last-child {
							margin-bottom: 0;
						}
						.text {
							@include ellipsis(1);
							padding: 6rpx 0;
						}
					}
					.order-item {
						@include flexBox(flex-start, center);
						.text {
							max-width: 90%;
							@include ellipsis(1);
						}
						.copy-btn {
							margin-left: 20rpx;
						}
					}
				}
				.bottom {
					padding: 24rpx 0;
					font-size: 24rpx;
					color: #78797A;
					border-top: 2rpx solid #EDEDED;
					@include flexBox(flex-end, center);
					.symbol {
						color: $main-color-text;
						.text {
							font-size: 32rpx;
						}
					}
				}
			}
		}
		.footer-bar {
			width: 100%;
			position: fixed;
			bottom: 0;
			background: #fff;
			height: 100rpx;
			padding: 0 20rpx;
			border-top: 1rpx solid #E0E0E0;
			@include flexBox(flex-end, center);
			.btn {
				border-radius: 50rpx;
				line-height: 60rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				margin: 0;
				margin-left: 20rpx;
				&::after {
					border: none;
				}
				&.wl {
					border: 1rpx solid #CBCCCD;
					color: #5A5B5C;
					background: #fff;
				}
				&.sh {
					border: 1rpx solid $main-color;
					color: #333333;
					background: $main-color;
				}
			}
		}
	}
</style>
